{extend name="../../admin/view/main"}

{block name='content'}
<style>

    /*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
    ::-webkit-scrollbar {
        width: 0px;
        height: 0px;
        background-color: #F5F5F5;
    }

    /*定义滚动条轨道 内阴影+圆角*/
    ::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, 0);
        border-radius: 10px;
        background-color: #F5F5F5;
    }

    /*定义滑块 内阴影+圆角*/
    ::-webkit-scrollbar-thumb {
        border-radius: 10px;
        -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
        background-color: #555;
    }

    input[type="button"], input[type="submit"], input[type="search"], input[type="reset"] {
        -webkit-appearance: none;
    }

    textarea {
        -webkit-appearance: none;
    }

    html, body {
        height: 100%;
        width: 100%;
    }

    .clear:after {
        content: '';
        display: block;
        clear: both;
    }

    .clear {
        zoom: 1;
    }

    .head {
        height: 50px;
        line-height: 50px;
        box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.1);
        background-color: #fff;
    }

    .head_seh {
        width: 200px;
        height: 30px;
        padding: 8px 10px;
        margin-left: 40px;
        border-radius: 3px;
        background-color: #f2f2f2;
    }

    .bar {
        padding: 0 20px;
    }

    .bar_head {
        height: 50px;
        margin-left: 20px;
    }

    .bar_head-left {
        float: left;
        line-height: 50px;
    }

    .head_left-item {
        padding: 2px 10px;
        color: #999999;
        cursor: pointer;
    }

    .head_left-active {
        background-color: #73acf8;
        border-radius: 6px;
        color: #fff;
    }

    .bar_head-right {
        position: relative;
        float: right;
        line-height: 50px;
        margin-right: 26px;
    }

    .bar_box {
        box-shadow: 2px 2px 6px 2px rgba(0, 0, 0, 0.1);
        padding-top: 10px;
        position: relative;
    }

    .bar_box-tit {
        line-height: 40px;
        overflow: hidden;
    }

    .tit_left {
        font-size: 18px;
        height: 20px;
        line-height: 20px;
        padding-left: 5px;
        border-left: 2px solid #73acf8;
        float: left;
    }

    .tit_right {
        float: right;
        margin-right: 20px;

    }

    .curs {
        cursor: pointer !important;
    }

    .tit_right span {
        margin-right: 20px;
        font-size: 14px;
        color: #999999;
    }

    .tit_active {
        color: #73acf8 !important;
    }

    #bar_img {
        width: 100%;
        height: 400px;
    }

    .bot_box {
        margin-top: 10px;
        padding: 0 20px;
    }

    .bot_box1 {
        height: 400px;
        padding-top: 10px;
        display: flex;
        justify-content: space-between;
    }

    .bot_box1 .tit_left {
        margin-top: 10px;

    }

    .pic_left {
        width: 62%;
        height: 100%;
        box-shadow: 0px 1px 5px 6px rgba(0, 0, 0, 0.1);
    }

    .pic_right {
        width: 35%;
        height: 100%;
        box-shadow: 0px 1px 5px 6px rgba(0, 0, 0, 0.1);
    }

    #pic_left-img {
        width: 100%;
        height: 100%;
    }

    #pic_left-imgtow {
        width: 100%;
        height: 100%;
    }

    #pic_right-img {
        width: 100%;
        height: 100%;
    }

    .select {
        font-size: 18px;
    }

    .paging {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 20px;
    }

    .paging .num {
        color: #7d7d7d;
        padding: 0 40px;
        font-size: 18px;
        vertical-align: baseline;
        cursor: text;
    }

    .paging span {
        font-size: 30px;
        color: #4b4b4b;
        cursor: pointer;
    }

    .paging .paging_active {
        color: #969696;
        cursor: no-drop;
    }
</style>
<body>
<div class="container">
    <!--<header class="head">-->
    <!--<input type="search" value="" placeholder="搜索" class="head_seh">-->
    <!--</header>-->
    <section class="bar">
        <header class="bar_head">
            <div class="bar_head-left">
                <span class="head_left-item">近90天</span>
                <span class="head_left-item">近30天</span>
                <span class="head_left-item">近7天</span>
                <span class="head_left-item">昨天</span>
                <span class="head_left-item head_left-active">今日</span>
            </div>
            <form class="layui-form layui-form-pane form-search">
                <div class="bar_head-right">
                    <div class="layui-form-item layui-inline">
                        <div class="layui-input-inline">
                            <select class="layui-select" lay-filter="shopList" name="shop_id" lay-search>

                            </select>
                        </div>
                    </div>
                </div>
                <script>form.render()</script>
            </form>
        </header>
        <!-- 条形图 -->
        <div class="bar_box">
            <header class="bar_box-tit">
                <h4 class="tit_left">门店人流量</h4>
                <div class="tit_right">
                    <span class="curs tit_active">环比</span>
                    <span class="curs">同比</span>
                </div>
            </header>
            <div id="bar_img"></div>
            <div class="paging" style="display: none">
                <span class="paging_active fist"><</span><span class="num">1</span><span class="last">></span>
            </div>
        </div>
    </section>
    <!-- 饼图 -->
    <section class="bot_box">
        <div class="bot_box1">
            <div class="pic_left">
                <div class="tit_left" id="pic_day">今日流量分析</div>
                <div id="pic_left-img"></div>
            </div>
            <div class="pic_right">
                <div class="tit_left">流量性别分析</div>
                <div id="pic_right-img"></div>
            </div>
        </div>
    </section>
    <section class="bot_box" id="box" style="display: none">
        <div class="bot_box1">
            <div class="pic_left">
                <div class="tit_left" id="title_hour">近7日小时流量</div>
                <div id="pic_left-imgtow"></div>
            </div>
        </div>
    </section>
</div>
</body>
<script>
    $(function () {
        let dimension = 'today';
        let contrast = 'hb';
        let lastPage = '';
        let shopId = 0;
        let page = 1;
        $('.bar_head-left .head_left-item').on('click', function () {
            $(this).addClass('head_left-active').siblings('.head_left-item').removeClass('head_left-active');
            let idx = $(this).index();
            switch (idx) {
                case 0:
                    dimension = '90day';
                    break;
                case 1:
                    dimension = '30day';
                    break;
                case 2:
                    dimension = '7day';
                    break;
                case 3:
                    dimension = 'yesterday';
                    break;
                case 4:
                    dimension = 'today';
                    break;
                default:
                    dimension = 'today';
            }
            getData({contrast, dimension, shopId, page})
        });
        $('.fist,.last').click(function () {
            let ele = $(this).index();
            if (ele === 0) {
                if (page > 1) {
                    page--;
                    if (page == 1) {
                        $('.fist').addClass('paging_active')
                    }
                    if (lastPage > page) {
                        $('.last').removeClass('paging_active')
                    }
                    getData({contrast, dimension, shopId, page})
                }
            } else {
                if (lastPage > page) {
                    page++;
                    $('.fist').removeClass('paging_active')
                    getData({contrast, dimension, shopId, page})
                }
            }
            $('.num').text(page)
        });
        $('.tit_right .curs').on('click', function () {
            $(this).addClass('tit_active').siblings('.curs').removeClass('tit_active');
            let idx = $(this).index() == 0 ? 'hb' : 'tb';
            contrast = idx;
            getData({contrast, dimension, shopId, page})
        });
        getData({contrast, dimension, shopId, page});

        function getData(data) {
            let barx = [], farLien = [], nearLine = [], mockData = [];
            $.ajax({
                url: 'admin/DataCentre/getCenterData',
                type: 'get',
                dataType: 'json',
                data,
                success: (res) => {
                    barx = res.data.abscissa;
                    farLien = res.data.far_line;
                    nearLine = res.data.near_line;
                    mockData = res.data.list;
                    let title = res.data.title;
                    let hourList = res.data.hourList;
                    lastPage = res.data.page_info.lastPage;
                    if (res.data.page_info.lastPage == page) {
                        $('.last').addClass('paging_active')
                    }
                    let sum = 0;
                    mockData.map(item => {
                        sum += item.total
                    });
                    mockData.map(item => {
                        return item.section
                    });
                    require(['echarts'], function (echarts) {
                        //门店人流量柱状图
                        let barChart = echarts.init(document.getElementById('bar_img'));
                        let option = {
                            grid: {
                                left: '3%',
                                right: '5%',
                                bottom: '20%',
                                top: '10%',
                                containLabel: true
                            },
                            tooltip: {
                                trigger: 'axis',
                                axisPointer: {
                                    type: 'cross',
                                    crossStyle: {
                                        color: '#555'
                                    }
                                }
                            },
                            legend: {
                                top: '2%',
                                right: '2%',
                            },
                            xAxis: [
                                {
                                    type: 'category',
                                    data: barx,
                                    axisPointer: {
                                        type: 'shadow'
                                    },
                                    splitLine: {
                                        show: false,
                                    },
                                    axisTick: {
                                        show: false
                                    },
                                    axisLabel: {
                                        margin: 8,
                                        fontSize: 15,
                                    },
                                    axisLine: {
                                        show: false,
                                        lineStyle: {
                                            color: '#333333',
                                            shadowColor: '#333333',
                                            shadowOffsetX: '20',
                                        },
                                        symbol: ['none', 'arrow'],
                                        symbolOffset: [0, 25]
                                    },
                                }
                            ],
                            yAxis: [
                                {
                                    axisTick: {
                                        show: false
                                    },
                                    type: 'value',
                                    splitNumber: 4,
                                    // show: false,
                                    name: '人数(位)',
                                    min: 0,
                                    axisLine: {
                                        show: false,
                                    },
                                    axisLabel: {
                                        margin: 20,
                                        fontSize: 15
                                    },
                                    textStyle: {
                                        color: '#f6d568'
                                    },
                                    splitLine: {
                                        show: true,
                                        lineStyle: {
                                            color: "#eef0f4",
                                            width: 1
                                        }
                                    },
                                },
                            ],
                            series: [
                                {
                                    name: title[0],
                                    type: 'bar',
                                    data: nearLine,
                                    itemStyle: {
                                        normal: {
                                            color: '#f6d568',
                                            barBorderRadius: [6, 6, 0, 0],
                                        }
                                    },
                                    barWidth: 10,
                                },
                                {
                                    name: title[1],
                                    type: 'bar',
                                    data: farLien,
                                    itemStyle: {
                                        normal: {
                                            color: '#81b8f9',
                                            barBorderRadius: [6, 6, 0, 0],
                                        }
                                    },
                                    barWidth: 10,
                                },

                            ]
                        };
                        option && barChart.setOption(option);
                        //今日流量分析饼图
                        let left_pic = echarts.init(document.getElementById('pic_left-img'));
                        mockData = mockData.map(item => {
                            return {value: item.total, name: item.section}
                        });
                        optionpic = {
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'horizontal',
                                left: '50%',
                                top: '25%',
                                itemGap: 25,
                                data: mockData,
                                formatter: function (name) {
                                    var data = optionpic.series[0].data;
                                    var total = 0;
                                    var tarValue;
                                    for (var i = 0; i < data.length; i++) {
                                        total += data[i].value;
                                        if (data[i].name == name) {
                                            tarValue = data[i].value;
                                        }
                                    }
                                    var v = tarValue;
                                    var p = Math.round(((tarValue / total) * 100));
                                    return `${name}  ${v}人(${p}%)`;
                                }
                            },
                            series: [
                                {
                                    name: '今日流量分析',
                                    type: 'pie',
                                    radius: ['42%', '75%'],
                                    center: ['25%', '50%'],
                                    data: mockData,
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        optionpic && left_pic.setOption(optionpic);

                        if (hourList.length != 0) {
                            showHourPic(hourList, title);
                            $('#box').show();
                            $('#title_hour').text(title[0] + '小时流量')
                        } else {
                            $('#box').hide();
                        }

                        let right_pic = echarts.init(document.getElementById('pic_right-img'));
                        let sexData = res.data.gender_list.map(item => {
                            if (item.sex == 1) {
                                return {value: item.total, name: '男'}
                            } else {
                                return {value: item.total, name: '女'}
                            }
                        });
                        var colors = ['#0085ff', '#00ffaa', '#ecff44'];
                        optionRight = {
                            tooltip: {
                                trigger: 'item'
                            },
                            legend: {
                                orient: 'vertical',
                                left: '40%',
                                bottom: 50,
                                data: sexData,
                                formatter: function (name) {
                                    var data = optionRight.series[0].data;
                                    var total = 0;
                                    var tarValue;
                                    for (var i = 0; i < data.length; i++) {
                                        total += data[i].value;
                                        if (data[i].name == name) {
                                            tarValue = data[i].value;
                                        }
                                    }
                                    var v = tarValue;
                                    var p = Math.round(((tarValue / total) * 100));
                                    return `${name}  ${v}人(${p}%)`;
                                }
                            },
                            series: [
                                {
                                    name: '流量性别分析',
                                    type: 'pie',
                                    radius: '50%',
                                    center: ['50%', '35%'],
                                    data: sexData,
                                    itemStyle: {
                                        color: function (param) {
                                            return colors[param.dataIndex];
                                        }
                                    },
                                    label: {
                                        show: false
                                    },
                                    labelLine: {
                                        show: false
                                    },
                                    emphasis: {
                                        itemStyle: {
                                            shadowBlur: 10,
                                            shadowOffsetX: 0,
                                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                                        }
                                    }
                                }
                            ]
                        };
                        optionRight && right_pic.setOption(optionRight);
                    });
                    $('#pic_day').text(title[0] + '流量分析');
                }
            })
        }

        //获取门店列表
        getShopList();

        function getShopList() {
            $.ajax({
                url: "admin/dataCentre/getShopList",
                type: 'get',
                dateType: 'json',
                success: res => {
                    if (res.code == 1) {
                        var html = `<option value="0">全部</option>
                                    <option value="-1">全门店人流量</option>`;
                        var data = res.data;
                        for (var i = 0; i < data.length; i++) {
                            html += `<option value="${data[i]['id']}">${data[i]['name']}</option>`;
                        }
                        $('[name="shop_id"]').html(html);
                        form.render();
                    }
                }
            })
        }

        //下拉事件
        layui.use(['form'], function () {
            var form = layui.form;
            form.on('select(shopList)', function (data) {
                shopId = data.value;
                if (shopId == -1) {
                    $('.paging').show();
                } else {
                    $('.paging').hide();
                }
                getData({contrast, dimension, shopId});
            });
        });

        //每时流量分析饼图
        function showHourPic(hourList, title) {
            //每时流量分析饼图
            require(['echarts'], function (echarts) {
                    let left_pictow = echarts.init(document.getElementById('pic_left-imgtow'));
                    hourList = hourList.map(item => {
                        return {value: item.total, name: item.section}
                    });
                    optionpictow = {
                        tooltip: {
                            trigger: 'item'
                        },
                        legend: {
                            orient: 'horizontal',
                            left: '50%',
                            top: '25%',
                            itemGap: 25,
                            data: hourList,
                            formatter: function (name) {
                                var data = optionpictow.series[0].data;
                                var total = 0;
                                var tarValue;
                                for (var i = 0; i < data.length; i++) {
                                    total += data[i].value;
                                    if (data[i].name == name) {
                                        tarValue = data[i].value;
                                    }
                                }
                                var v = tarValue;
                                var p = Math.round(((tarValue / total) * 100));
                                return `${name}  ${v}人(${p}%)`;
                            }
                        },
                        series: [
                            {
                                name: title[0] + '小时流量',
                                type: 'pie',
                                radius: ['42%', '75%'],
                                center: ['25%', '50%'],
                                data: hourList,
                                label: {
                                    show: false
                                },
                                labelLine: {
                                    show: false
                                },
                                emphasis: {
                                    itemStyle: {
                                        shadowBlur: 10,
                                        shadowOffsetX: 0,
                                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                                    }
                                }
                            }
                        ]
                    };
                    optionpictow && left_pictow.setOption(optionpictow);
                }
            )
        }
    })
</script>
{/block}